<template>
	<div class="lxl-form">
		<el-form ref="lxlform" :rules="rules" :model="lxlform" label-width="100px">
			<el-form-item label="资源名称" prop="name">
				<el-input v-model="lxlform.name"></el-input>
			</el-form-item>
			<el-form-item label="资源类别" prop="type">
				<el-radio-group v-model="lxlform.type">
					<el-radio :label="1">目录</el-radio>
					<el-radio :label="0">按钮</el-radio>
				</el-radio-group>
			</el-form-item>
<!-- 			<el-form-item label="层级" prop="level">
				<el-input v-model="lxlform.level"></el-input>
			</el-form-item>
			<el-form-item label="上级id" prop="parentId">
				<el-input v-model="lxlform.parentId"></el-input>
			</el-form-item> -->
			<el-form-item label="前端地址" prop="frontUrl">
				<el-input v-model="lxlform.frontUrl"></el-input>
			</el-form-item>
			<el-form-item label="后端地址" prop="backUrl">
				<el-input v-model="lxlform.backUrl"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="save">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>

import { get, post } from '@/plugins/axios.js'
export default {
	name: 'ResultEdit',
	props: {
		id: {
			required: true
		},
		module: {
			required: true,
			type: String 
		},
		parentId: {
			required: true
		},
		level: {
			required: true
		}
	},
	created () {
		if (this.id) {
			this.getone()
		} else {
			this.lxlform.parentId = this.parentId
			this.lxlform.level = this.level
		}
	},
	data () {
		const checkData = (rule,value,callback) => {
			get(this.url.check, { fieldName: rule.field, value: value, id: this.id }, response => {
				if (response){
					// 控制允不允许通过
					callback()
				} else {
					callback(new Error)
				}
			})
		}
		return {
			url: {
				check: this.module + '/check',
				getone: this.module + '/getone',
				add: this.module + '/add',
				update: this.module + '/update'
			},
			lxlform: {
				name: '',
				type: '',
				level: '',
				parentId: '',
				frontUrl: '',
				backUrl: ''
			},
			rules: {
				name: [
					{ required: true, message: '请输入资源名称', trigger: 'input' },
					{ max: 20,message: '资源名称不能超过20个字符', trigger: 'input' },
					{ validator: checkData, message: '该资源名称已经存在', trigger: 'input'}
				],
				type: [
					{ required: true, message: '请选择资源类别', trigger: 'input'},
				],
			},
		}
	},
	methods: {
		//读取一条数据
		getone () {
			get(this.url.getone, { id: this.id }, response => {
				for (const key in this.lxlform) {
					//先判断response有没有这个key
					if (Object.prototype.hasOwnProperty.call(response,key)){
						this.lxlform[key] = response[key]
					}
				}
				this.lxlform.id = this.id
				console.log(response)
			})
		},
		save () {
			//校验
			this.$refs.lxlform.validate(valid => {
				if (valid){
					//校验通过
					//formData.append('name', 'zhangsan')
					post(this.id ? this.url.update : this.url.add, this.lxlform, response => {
						//$emit() 是一个函数
						console.log(this.lxlform)
						this.$emit("update:show", false)
						this.$emit("getTableData")
					})
				}
			})
		},
		changeIcon (file, fileList) {
			this.lxlform.file = file.raw
			console.log(file)
		},
		removeIcon () {
			this.lxlform.file = null
			this.fileList = []
		}
	}
}
</script>

<style scoped lang="less">

</style>
